<template>
	<div style="padding:0px;">
		<el-form :model="dialogForm"  ref="dialogForm" :label-width="formLabelWidth" :rules="rules">
			<el-card class="box-card">
			    <div slot="header" class="clearfix">
			        <span style="line-height: 30px;">订单信息</span>
			    </div>
			    <div  class="text item">
			    	<el-form-item label="订单号"  >
				        <el-input v-model="dialogForm.orderNumber" auto-complete="off" disabled ></el-input>
				    </el-form-item>	
				    <el-form-item label="汽车车型"   >
				        <el-input  v-model="dialogForm.specificationName" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="汽车数量"  prop="amount">
				        <el-input  type="tel" :maxlength="9" v-model.number="dialogForm.amount" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    
				    <el-form-item   label="购车总价格"   prop="totalPrice" class="currency">
				    	<el-input   v-model="dialogForm.totalPrice" @blur="FormatTwo('totalPrice')" :maxlength="11"  auto-complete="off" disabled></el-input> 
				    	<span class="convertCurrency">{{dialogForm.totalPrice|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="垫资金额"   prop="paymentAmount" class="currency">
				    	<el-input   v-model="dialogForm.paymentAmount" @blur="FormatTwo('paymentAmount')" :maxlength="11" auto-complete="off" disabled></el-input>
				    	<span class="convertCurrency">{{dialogForm.paymentAmount|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="定金金额"   prop="earnest" class="currency">
				    	<el-input  v-model="dialogForm.earnest" @blur="FormatTwo('earnest')"  :maxlength="11" auto-complete="off" disabled></el-input>
				    	<span class="convertCurrency">{{dialogForm.earnest|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="保证金金额"   prop="deposit" class="currency">
				    	<el-input  :value="(((this.dialogForm.totalPrice-0) - (this.dialogForm.paymentAmount-0) - (this.dialogForm.earnest-0))||0).toFixed(2)"  disabled></el-input>
				    	<span class="convertCurrency">{{((this.dialogForm.totalPrice-0) - (this.dialogForm.paymentAmount-0) - (this.dialogForm.earnest-0)).toFixed(2)|convertCurrency}}</span>
				    </el-form-item>
				</div>
			</el-card>
			<el-card class="box-card" style="margin-top:15px;">
			    <div slot="header" class="clearfix">
			        <span style="line-height: 30px;">已有图片信息</span>
			    </div>
			    <div  class="text item">
			    	<el-form-item label="上游购销合同"  class="is-required">
			    	  <qiniu :qiniuImage="qiniuImage"   :id="qiniuImage.id" :canDelete='false' ></qiniu>
				    </el-form-item>
				    <el-form-item label="定金凭证"  >
				      <qiniu  :qiniuImage="qiniuImage1"   :id="qiniuImage1.id" :canDelete='false' ></qiniu>
				    </el-form-item>
				    <el-form-item label="供应商收款账号"  >
				      <qiniu  :qiniuImage="qiniuImage2"   :id="qiniuImage2.id" :canDelete='false' ></qiniu>
				    </el-form-item>
				    <el-form-item label="提车地址及联系人"  >
				      <qiniu  :qiniuImage="qiniuImage3"   :id="qiniuImage3.id" :canDelete='false' ></qiniu>
				    </el-form-item>
			    </div>
			</el-card>
		    <el-card class="box-card" style="margin-top:15px;">
			    <div slot="header" class="clearfix">
			        <span style="line-height: 30px;">补充信息</span>
			    </div>
			    <div  class="text item">
			    	<el-form-item label="补充图片"  class="is-required">
			    	  <qiniu :qiniuImage="qiniuImage4"  :packJson='packJson' :id="qiniuImage4.id" :canDelete='dialogSendData.isAdd'></qiniu>
				    </el-form-item>
				    <el-form-item label="补充说明"  >
				      <el-input type="textarea" :rows=3 v-model="dialogForm.remark" auto-complete="off" :maxlength="200" ></el-input>
				    </el-form-item>	
			    </div>
			</el-card>
		</el-form>
		<div style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
			 <el-button v-if="dialogSendData.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
		</div>
	</div>
</template>
<script  >

    import qiniu from '@/views/qiniu/upload';
    import agentHttp from '@/utils/agentHttp.js';
    import {require,prop,phone,decimalTwo,decimalFour,isChinese,max100} from '@/utils/rules.js'
	export default{ 
		created(){  
		   
        },
		components:{qiniu}, 
		data(){
				return{
					rules: {

			        },
					dialogForm:{
						interestRate:"",
                        earnest:"",
						paymentAmount:"",
						totalPrice:"",
						imagUrl:[],
						imagUrl1:[],
						imagUrl2:[],
						imagUrl3:[]
					},
					formLabelWidth:'170px', 
			        //七牛图片上传
			        qiniuImage:{
			        	id:"qiniuImage", //图片预览的id   
			        	image_uri:[],    //图片上传的列表  只含有url地址
			        },
			        
			        qiniuImage1:{
			        	id:"qiniuImage1",    
			        	image_uri:[]
			        },
			        
			        qiniuImage2:{
			        	id:"qiniuImage2",    
			        	image_uri:[]
			        },
			        
			        qiniuImage3:{
			        	id:"qiniuImage3",    
			        	image_uri:[]
			        },
			        qiniuImage4:{
			        	id:"qiniuImage4",    
			        	image_uri:[]
			        },
			        packJson:{
						maxLength:9,   //最大图片数量
						accept:"",//image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
						size:4    //图片大小  单位兆
					}
			        
				}
			},props:[
			    'dialogSendData','tableData','carOrderId'
			    ]
			,methods:{	
				returnBack (){
					this.dialogSendData.dialogFormVisible=false; 
				},
				submitConfirmForm(formName){ 
	            	this.$refs[formName].validate((valid) => {
			          if (valid) {
			          	this.submitOrder();
			          } else {
			          	this.$nextTick(()=>{
			          	   setTimeout(()=>{this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText);},200) 
			               return false;
			            })
			          }
			        });
				},
				submitOrder(){	
	                if (this.setImageUrl()) {
						agentHttp.postJson('adminApi/admin/car_order/first_audit_order/temporary_sumbit',this.dialogForm).then((data)=>{
				            if(data.success){  
				            	this.$emit('refreshTableData');
				            	this.dialogSendData.dialogFormVisible=false; 
				            	this.$message.success(data.data||"提交成功");
				            } 
				        }) 
					}
			    },
			    setImageUrl(){
	               	this.dialogForm.supplementPic=this.qiniuImage4.image_uri.join(",");
	               	if(this.dialogForm.supplementPic.length<1){
	               		this.$message.warning('补充图片至少一张');
			            return false;
	               	}
	                return true; 
			    }
			}
	};
		 
</script>